<template>
    <div>
        <header class="container">
            <top-cmp></top-cmp>

            <div class="home_header">
                <!-- <div class="search">
                    搜索商品名称
                </div> -->
                <router-link to="/SearchPage" tag="div" class="search">
                    搜索商品名称
                </router-link>
                <div class="srach">搜索</div>

            </div>


            <div class="bg">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item><img :src="img1" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="img2" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="img1" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="img2" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="img1" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="img2" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="img1" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="img2" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="img1" alt=""></van-swipe-item>
                </van-swipe>
            </div>
            <div class="list">
                <router-link to="/allItems" tag="div" class="item">
                    <div class="img"><img src="../assets/img/2207043420VkDYN8RxAgwGyMWkY7vq6Ldba2JnK1.png" alt=""></div>
                    <div class="font">全部项目</div>
                </router-link>
                <router-link to="/RankingList" tag="div" class="item">
                    <div class="img"><img src="../assets/img/2207043420VkDYN8RxAgwGyMWkY7vq6Ldba2JnK1.png" alt=""></div>
                    <div class="font">榜单</div>
                </router-link>
                <router-link to="/shopPing" tag="div" class="item">
                    <div class="img"><img src="../assets/img/2207043420VkDYN8RxAgwGyMWkY7vq6Ldba2JnK1.png" alt=""></div>
                    <div class="font">商城</div>
                </router-link>

                <router-link to="/download" tag="div" class="item">
                    <div class="img"><img src="../assets/img/2207043420VkDYN8RxAgwGyMWkY7vq6Ldba2JnK1.png" alt=""></div>
                    <div class="font">摩点下载</div>
                </router-link>
            </div>
        </header>

        <main class="container">
            <div class="conter">
                <van-list v-model="loading" :finished="finished" finished-text="我也是有底线的！" @load="onLoad">
                    <ul v-if="lists">
                        <router-link to="/CommodityView" tag="li" v-for="(item, index) in this.lists.data.lists"
                            :key="index" >
                            <div><img :src="item.imgs" alt=""></div>
                            <h4>{{ item.title }}</h4>
                            <div class="price">
                                <span>{{ item.price }}</span>
                                <span>{{ item.good }}</span>
                            </div>
                        </router-link>
                    </ul>
                </van-list>

            </div>
        </main>

        <footer class="container">
            <div class="button">
                <!-- <p>打开APP</p> -->
                <router-link to="/download" tag="p">打开APP</router-link>
            </div>
        </footer>




    </div>
</template>

<script>
import topCmp from "../components/topCmp.vue"
import { getName } from "../assets/api/home.js"
export default {
    data() {
        return {
            // 数据
            lists: null,
            // 轮播图
            img1: require('../assets/img/slide.jpg'),
            img2: require('../assets/img/slide2.jpg'),
            loading: false,
            finished: false,
        };
    },

    methods: {
        onLoad() {
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    this.lists.data.lists.push({
                        imgs: require('../assets/img/paihangbang01.jpg'),
                        title: '智有型-金属拼装-机械龙首发',
                        price: '已筹 ¥10.9万',
                        good: '支持者 151'
                    });
                }

                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.lists.data.lists.length >= 40) {
                    this.finished = true;
                    console.log(this);
                }
            }, 1000);
        },
        getNamefun() {
            getName().then((data) => {
                this.lists = data;
                console.log(this.lists.data.lists);
            })
        }

    },
    created() {
        this.getNamefun()
    },
    components: {
        topCmp
    }



}



</script>

<style lang="scss">
.home_header {
    margin-top: 60px;
    height: 42px;
    padding: 0px 13px;
    display: flex;

    .icon {
        width: 14%;
        text-align: center;

        img {
            width: 27px;
            height: 27px;
            margin: 6px auto 0 auto;
        }
    }

    .search {
        flex: 1;
        height: 32px;
        line-height: 32px;
        border: 1px solid #e5e5e5;
        font-size: 16px;
        margin-top: 4px;
        color: #b7b7b7;
        padding-left: 31px;
        background: #fff url("../assets/img/下载.png") 6px 6px no-repeat;
        background-size: 20px;
    }
}

.srach {
    height: 42px;
    line-height: 42px;
    color: #00c4a1;
}

.bg {
    margin: 8px 0px;
    position: relative;

    ul {
        width: 130px;
        position: absolute;
        left: 0;
        bottom: 10px;
        right: 0;
        margin: auto;

        li {
            width: 7px;
            height: 7px;
            float: left;
            margin-right: 5px;
            background-color: #fff;
            border-radius: 50%;
            opacity: 0.5;
        }
    }
}

.list {
    display: flex;
    justify-content: space-between;

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 13px;
        height: 100px;

        .font {
            font-size: 9px;
        }

        .img {
            width: 45px;
            height: 45px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

main {
    background-color: #f2f2f2;
}

.conter {
    ul {
        display: flex;
        flex-wrap: wrap;
        margin-left: 10px;

        li {
            width: 46.2%;
            border: 1px solid #bcc0c5;
            background-color: #fff;
            margin-bottom: 3.8%;

            &:nth-child(2n-1) {
                margin-right: 3.8%;
            }

            h4 {
                padding: 0 10px;
                font-size: 12px;
                color: #222c37;
            }

            .price {
                font-size: 10px;
                padding-left: 10px;
                color: #4f4841;
                margin-top: 45px;
            }
        }
    }
}

.button {
    width: 95px;
    height: 34px;
    background-color: #01c4a1;
    font-size: 14px;
    border-radius: 16px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: auto;
}
</style>